﻿/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../lib/bs4/scss/bootstrap.scss" />

.box-scale,
.box-rise {
    will-change: transform, box-shadow;
    transition-property: transform, box-shadow;
    transition-duration: $box-transition-duration;
    transition-timing-function: $box-transition-timing;
    z-index: 1;
}

.box-scale:hover {
    transform: scale($box-scale-factor);
    z-index: 2;
}

.box-rise:hover {
    transform: translateY(-8px);
    z-index: 2;

    &.shadow-sm,
    &.shadow,
    &.shadow-lg {
        box-shadow: var(--box-shadow) !important;
    }

    &.shadow-sm {
        --box-shadow: #{$box-shadow-var};
    }

    &.shadow {
        --box-shadow: #{$box-shadow-lg-var};
    }

    &.shadow-lg {
        --box-shadow: #{$box-shadow-xl-var};
    }
}


// 
// Flat boxes
// -----------------------------------------------

.box-flat {
    transition-property: transform, color, box-shadow, background-color, background-image;
    transition-duration: $box-transition-duration;
    transition-timing-function: $box-transition-timing;

    &:not(:hover) {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
        color: $body-color;

        // Handle gradients smoothly
        .bg-overlay:not(.bg-divider) { 
            opacity: 0 !important;
        }
    }

    &.box-flat-inverse:hover,
    &.box-flat-inverse:hover .g-icon > i {
        $c2: rgba($yiq-text-light, 0.85);
        --box-color: #{$yiq-text-light};
        --box-color-2: #{$c2};
        color: var(--box-color) !important;
    }
}


// 
// Box image
// -----------------------------------------------

.box-img-wrapper {
    position: relative;
    overflow: hidden;
}

.box-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.box-img-left .box-img,
.box-img-right .box-img {
    height: 100%;
}

.box-img-scale,
.box-img-scale-rev {
    transition: transform 0.8s $box-transition-timing;
    backface-visibility: hidden;
    will-change: transform;
}

.box-img-scale {
    transform: scale3d(1, 1, 1);
}

.box-img-scale-rev {
    transform: scale3d($box-scale-factor, $box-scale-factor, $box-scale-factor);
}

.box-img-left,
.box-img-right {
    flex-flow: row;
}

.box-img-top,
.box-img-bottom {
    flex-flow: column;
}

.box-img-background .g-block-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}